<template>
	<a-table
		:scroll="scroll"
		:columns="columns"
		:data-source="data"
		:pagination="pagination"
		:loading="loading"
		:row-key="(record, index) => index"
		:row-selection="rowSelection"
		:size="size"
		@change="handleTableChange"
	>
		<a-tooltip slot="id" slot-scope="text, record">
			<template slot="title">
				{{ record.status_show }}
			</template>

			<a-tag :color="record.status == 1 ? '#108ee9' : '#87d068'">
				<app-copy :value="record.id" />
			</a-tag>
		</a-tooltip>
		<!-- <template slot="area_name" slot-scope="text, record">
			{{ record.area_name }}
			<span v-if="record.address">
				{{ record.address }}
			</span>
		</template> -->

		<template v-slot:name="{ name }">
			<a-tooltip :title="name" placement="topLeft">
				{{ name }}
			</a-tooltip>
		</template>

		<template v-slot:area_name="{ area_name }">
			<a-tooltip :title="area_name" placement="topLeft">
				{{ area_name }}
			</a-tooltip>
		</template>
		<template v-slot:address="{ address }">
			<a-tooltip :title="address" placement="topLeft">
				{{ address }}
			</a-tooltip>
		</template>

		<span slot="status" slot-scope="text, record" style="white-space: nowrap">
			<template>
				<a-badge
					:status="statusTypeFilter(record.status)"
					:text="statusFilter(record.status)"
				/>
			</template>
		</span>

		<template slot="action" slot-scope="text, record">
			<a @click="$emit('action', 'area', record)" v-has="'area.query'"
				>区域管理</a
			>
			<a-divider type="vertical" />
			<a @click="$emit('action', 'edit', record)" v-has="'salemarket.update'"
				>编辑</a
			>
			<a-divider type="vertical" />
			<a @click="$emit('action', 'show', record)">详情</a>
			<a-divider type="vertical" />
			<a @click="$emit('action', 'delete', record)" v-has="'salemarket.delete'"
				>删除</a
			>
		</template>
	</a-table>
</template>

<script>
	export default {
		props: {
			columns: {
				type: Array,
				default: () => {
					return {}
				},
			},
			data: {
				type: Array,
				default: () => {
					return []
				},
			},
			pagination: {
				type: [Object, Boolean],
				default: () => {
					return false
				},
			},
			rowSelection: {
				type: Object,
				default: () => {
					return undefined
				},
			},
			loading: {
				type: Boolean,
				default: false,
			},
			size: {
				type: String,
				default: undefined,
			},
			scroll: {
				type: Object,
				default: () => {
					// return { x: 1200 }
					return undefined
				},
			},
		},
		data() {
			this.statusMap = {
				1: {
					status: "success",
					text: "正常",
				},
				0: {
					status: "default",
					text: "停用",
				},
				"-1": {
					status: "error",
					text: "冻结",
				},
			}
			return {}
		},
		methods: {
			statusFilter(status) {
				return this.statusMap[status + ""].text
			},
			statusTypeFilter(status) {
				return this.statusMap[status + ""].status
			},
			handleTableChange(pagination, filters, sorter) {
				this.$emit("change", pagination, filters, sorter)
			},
		},
	}
</script>

<style scoped>
	.tooltipLink {
		color: #fff;
	}
	.tooltipLink:hover {
		color: #1890ff;
	}
</style>
